import React from 'react';
import ReactDOM from 'react-dom';
import { Menu , Icon} from 'antd';
import http from './http';
import 'antd/dist/antd.css';

const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

class RepositoryList extends React.Component {

    constructor(props) {
        super(props);
        this.state = {groups: []};
    }

    componentWillMount(){
        var that = this;
        http.get("/dbctrl/listRepositories", null, function (data) {
            that.setState({groups:data});
        });
    }

    render(){
        var groups = this.state.groups;

        return (
            groups.map(function (g) {
                var menuItems = g.children;
                if(menuItems){
                    return (<MenuItemGroup key={g.key} title={g.name}>
                        <Menu.Item key='12'>12</Menu.Item>
                        <Menu.Item key='13'>13</Menu.Item>
                    </MenuItemGroup>)
                }
                return (<MenuItemGroup key={g.key} title={g.name}></MenuItemGroup>);
            })
        );
    }
};

class Root extends React.Component {

    constructor(props) {
        super(props);
        this.state = {groups: []};
    }

    componentWillMount(){
        var that = this;
        http.get("/dbctrl/listRepositories", null, function (data) {
            that.setState({groups:data});
        });
    }

    handleClick = (e) => {
        //console.log('click ', e);
    }


    render() {
        var groups = this.state.groups;

        var handleClick = function (e) {
            console.log('click ', e);
        };

        return (
            <Menu
                style={{ width: 256}}
                defaultSelectedKeys={['1']}
                defaultOpenKeys={['sqlRepositoryList']}
                mode="inline">
                <SubMenu key="sqlRepositoryList" title={<span><Icon type="appstore" /><span>脚本库列表</span></span>}>
                    {
                        groups.map(function (g) {
                            return (
                                <MenuItemGroup key={g.key} title={g.name}>
                                    {
                                        g.children.map(function (m) {
                                            return (<Menu.Item onClick={handleClick(this)} key={m.key}>{m.name}</Menu.Item>)
                                        })
                                    }
                                </MenuItemGroup>
                            );
                        })
                    }

                </SubMenu>
            </Menu>
        );
    }
}

ReactDOM.render(<Root />, document.getElementById('root'));